import {WeaAlertPage} from 'ecCom';
import {Table, Button, Tooltip} from 'antd';
import MeetMemberReceiptDialog from './MeetMemberReceiptDialog';
import MeetMemberRemarkDialog from './MeetMemberRemarkDialog';
import {inject, observer} from 'mobx-react';
import {observable, action, toJS} from 'mobx';
import {WeaLocaleProvider} from 'ecCom';
import {WeaTableNew} from 'comsMobx';
import * as Apis from '../../../../apis/previewMeeting';

const WeaTable = WeaTableNew.WeaTable;

const getLabel = WeaLocaleProvider.getLabel;

@inject('meetingDialog')
@observer
class MeetMember extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hrmCollapse: true,
      crmCollapse: false,
      otherCollapse: false,
      markCollapse: false
    };
  }

  render() {
    let {setNewRemark} = this.props.meetingDialog
    const {hrmTabel,crmTabel,MeetingMemberExportExcelUrl} = this.props.meetingDialog;
    const data = this.props.data || {};
    let {hrmcolumns = [],  hrmnum, allAttend, allCrmAttend} = data;
    hrmcolumns = hrmcolumns.map((col) => {
      return this.getHrmCol(col);
    });
    
    let {crmcolumns = [], crmdatas = [], crmnum} = data;
    let {otherbtn, othersremark, othertitle} = data;
    let {hrmCollapse, crmCollapse, otherCollapse, markCollapse} = this.state;
    const iconStyle = {
			display: 'inline-block',
			color: '#58A0F8',
			fontSize: '16px',
			paddingRight: '8px',
      		cursor: 'pointer',
      		float: 'right',
		}; 
    return (
      <div className="wea-meeting-member-view">
        <div>
          <div className="panel-title cursor-pointer" style={{paddingTop: 0}}
               onClick={() => this.setState({hrmCollapse: !hrmCollapse})}>
            {`${getLabel(383497, "参会人员列表")}（${getLabel(383499, "应到人数")}${allAttend}${getLabel(383382, "人")}）`}
            <span className={`fr ${hrmCollapse ? 'icon-coms-down' : 'icon-coms-up'}`} style={{color: '#B2B2B2',float:'right'}}></span>
            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@lr8rsx`} placement="bottom" title={getLabel(383586,"导出")}><span className="icon-coms-download" style={iconStyle}
                         onClick={(e) => { e.stopPropagation(); this.exportExcel({meetingId:this.props.meetingId});}}></span></Tooltip>
          </div>
          {hrmCollapse ?
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@zn682s`} comsWeaTableStore={hrmTabel} childrenColumnName="otherMemberListspan" onOperatesClick={this.onOperatesClick}/>
            :''
          }
        </div>

        {crmcolumns.length != 0 && crmTabel.datas.length != 0 &&
        <div>

          <div className="panel-title cursor-pointer" onClick={() => this.setState({crmCollapse: !crmCollapse})}>
            {`${getLabel(383423, "参会客户")}（${getLabel(383501, "应到客户数")}${allCrmAttend}）`}
            <span className={`fr ${crmCollapse ? 'icon-coms-down' : 'icon-coms-up'}`}></span>
          </div>
          {crmCollapse ||
          <div className="wea-new-table">
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@4kldui`} comsWeaTableStore={crmTabel} childrenColumnName="otherMemberListspan" onOperatesClick={this.onOperatesClick}/>
          </div>
          }
        </div>
        }

        <div>
          <div className="panel-title cursor-pointer" onClick={() => this.setState({otherCollapse: !otherCollapse})}>
            {getLabel(383502, "其他人员")}
            <span className={`fr ${otherCollapse ? 'icon-coms-down' : 'icon-coms-up'}`} style={{float:'right'}}></span>
          </div>
          {otherCollapse || (othertitle ? <div className="panel-content">{othertitle}</div> :
            <div className="panel-content no-data">{getLabel(83553, "暂无")}</div>)}
        </div>

        <div>
          <div className="panel-title cursor-pointer" onClick={() => this.setState({markCollapse: !markCollapse})}>
            {getLabel(454, "备注")}
            <span className={`fr ${markCollapse ? 'icon-coms-down' : 'icon-coms-up'}`} style={{float:'right'}}></span>
            {otherbtn &&
            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@xa5ttq`} placement="bottom" title={getLabel(384116,"编辑")}><span className="fr icon-coms-BatchEditing-Hot cursor-pointer" onClick={this.openRemark} style={{float:'right'}}></span></Tooltip>}
          </div>
          {markCollapse || (othersremark ?
            <div className="panel-content" dangerouslySetInnerHTML={{__html: othersremark}}/> :
            <div className="panel-content no-data">{getLabel(383352, "暂无备注")}</div>)}
        </div>

        <div className="panel-title summary border-none">
          {getLabel(383504, "已确定参会人员总计")}<span
          className="color-red">{hrmnum + crmnum}</span>{`${getLabel(383382, "人")}，${getLabel(383505, "其中公司员工")}`}
          <span className="color-red">{hrmnum}</span>{`${getLabel(383382, "人")}，${getLabel(383506, "外部人员")}`}
          <span className="color-red">{crmnum}</span>{getLabel(383382, "人")}
        </div>
        <MeetMemberReceiptDialog ecId={`${this && this.props && this.props.ecId || ''}_MeetMemberReceiptDialog@01bjw2`} ref="receipt" hrmcolumns={hrmcolumns} crmcolumns={crmcolumns}
                                 meetingId={this.props.meetingId}/>
        <MeetMemberRemarkDialog ecId={`${this && this.props && this.props.ecId || ''}_MeetMemberRemarkDialog@qr2ft3`} ref="remark" meetingId={this.props.meetingId}
                                setNewRemark={setNewRemark} remark={othersremark}/>
      </div>
    );
  }

  exportExcel = (param) => {
    const { exportMeetMemberExcel} = this.props.meetingDialog;
    exportMeetMemberExcel(param)
    //exportExcelUrl  =encodeURI('/api/meeting/report/exportExcel?tableKey='+JSON.stringify(reportData));
  }

  openReceipt(record, type) {
    //多时区情况下,页面显示span的值,正常显示值都是服务器时间,所以需要根据span里的值进行分割
    record.values = {
      isattend:record.isattend,
      backdate:record.backdate,
      backtime:record.backtime,
      begindate:record.begindate,
      begintime:record.begintime,
      bookroom:record.bookroom,
      bookticket:record.bookticket,
      memberid:record.membermanager,
      recRemark:record.recRemark,
      recorderid:record.recorderid,
      roomstander:record.roomstander,
      ticketstander:record.ticketstander,
      tickettype:record.tickettype,
      othermember:record.othermember,
    }
    if(record.begindatespan){
      if(record.begindatespan.length == 10){
        record.values.begindate = record.begindatespan
      }else if(record.begindatespan.length == 5){
        record.values.begintime = record.begindatespan
      }else if(record.begindatespan.length == 16){
        record.values.begindate = record.begindatespan.split(" ")[0]
        record.values.begintime = record.begindatespan.split(" ")[1]
      }
    }
    if(record.backdatespan){
      if(record.backdatespan.length == 10){
        record.values.backdate = record.backdatespan
      }else if(record.backdatespan.length == 5){
        record.values.backtime = record.backdatespan
      }else if(record.backdatespan.length == 16){
        record.values.backdate = record.backdatespan.split(" ")[0]
        record.values.backtime = record.backdatespan.split(" ")[1]
      }
    }
    if(record.othermemberspan){
      if (typeof(record.othermemberspan) == 'string') {
        record.othermember = record.othermemberspan ? JSON.parse(record.othermemberspan) : undefined;
      }
    } 

    this.refs.receipt.wrappedInstance.open(record, type);
  }

  onOperatesClick = (record, index, operate) => {
    const { dialogStatus, receiptFormStatus, setReceiptFormStatus, doNewForm } = this.props.meetingDialog
    const { form, form2, receiptFormCondition } = receiptFormStatus
    const { meetingId } = dialogStatus;
    const { meetingDialog } = this.props;
    const { setState } = meetingDialog;
    const funName = operate.href.replace(/(javascript\:)|(\(\))/g, () => '');
    Apis.getMemberReceipt({recordid:record.recorderid,meetingId:meetingId,isPreview:0}).then(datas =>{
      
      setReceiptFormStatus({receiptFormCondition:new Array(datas.fields[0]),token:datas.token})
        // if(funName === 'openHrmReceipt'){
        //   form.initFormFields(new Array(datas.fields[0]))
        // }else{
        //   form2.initFormFields(new Array(datas.fields[0]))
        // }
        doNewForm(datas.token, (form) => {
          form.initFormFields(new Array(datas.fields[0]))
        })
      if(datas.fields[1]){
        setReceiptFormStatus({
          isCrmReceiptDetail:datas.fields[1].isCrmReceiptDetail,
          crmCol:datas.fields[1].items,
          crmCondition:datas.fields[1],
          datas:datas.fields[1].datas,
        })
      }
      // setTimeout(()=>{
        if (funName === 'openHrmReceipt') {
          this.openReceipt(record,'hrm');
          setState({other_member: record.othermember.map(res => {return {id: res.otherid, name: res.othername}})});
        }else if(funName === 'openCrmReceipt'){
          this.openReceipt(record,'crm');
        }
      // },10)
     
    })
   
    
  }

  openRemark = (e) => {
    e.stopPropagation();
    this.refs.remark.open();
  }

  getHrmCol(col) {
    let newCol = {...col};
    newCol.dataIndex = col.key;
    switch (col.key) {
      case "membername": {
        newCol.render = (text, record, index) => {
          return <a href={`javaScript:openhrm(${record.memberid});`} onClick={window.pointerXY}
                    title={record.membername}>{record.membername}</a>
        }
        break;
      }
      case "isattend":
      case "begindate":
      case "bookroom":
      case "roomstander":
      case "bookticket":
      case "backdate":
      case "ticketstander":
      default:
        break;
    }
    return newCol;
  }

  getCrmCol = (col) => {
    let newCol = {...col};
    newCol.dataIndex = newCol.key;
    if (newCol.key == 'membername') {
      newCol.render = (text, record, index) => {
        if(record.managerid){
          return <span>{record.membername}(<a href={`javaScript:openhrm(${record.managerid});`} onClick={window.pointerXY}
          title={record.managername}>{record.managername}</a>)</span>
        }else{
          return <span title={record.sex}>{record.membername}</span>
        }
        
      };
    }
    return newCol;
  }

  expandHrmRow = (record, index) => {
    let otherInfo = Array.isArray(record.othermember) ? record.othermember.reduce((sum, val) => sum ? sum + "," + val.othername : val.othername, "") : "";
    return (
      <div className="expand">
        {`${getLabel(383508, "其它参会人员")}：${otherInfo || getLabel(127228, "无")}`}
      </div>
    )
  }
}

export default MeetMember;